<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: YuanYu
 * @LastEditTime: 2021-10-19 18:55:38
-->
<template>
  <!-- 这里使用ref 作用类似于id -->
  <!-- 2.定义容器 -->
  <div id="bottom2" style="height: 150px"></div>
</template>

<script>
// 在g2plot中 引入Column组件
import { Area } from "@antv/g2plot";
// 使用vue3.0的语法
// 1.引入g2plot 已经在package.json中进行引用

export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      const data = [
        {
          timePeriod: "心胸外科",
          value: 5,
        },
        {
          timePeriod: "骨科",
          value: 8,
        },
        {
          timePeriod: "急诊科",
          value: 10,
        },
        {
          timePeriod: "内科",
          value: 6,
        },
      ];

      const area = new Area("bottom2", {
        data,
        xField: "timePeriod",
        yField: "value",
        xAxis: {
          range: [0, 1],
        },
        // 配置别名
        meta: {
          value: {
            alias: "加床",
          },
        },
      });
      area.render();
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>


<style scoped>
</style>